<script setup lang="ts">
import { CirclePlus, Search } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { patrolPointLocationTable } from "./utils/definition";
import { message } from "@/utils/message";
import { PureTableBar } from "@/components/RePureTableBar";
const listLoading = ref(false);
const pagination = reactive({
  pageSize: 20,
  currentPage: 1,
  pageSizes: [20, 40, 60],
  total: 0,
  align: "right",
  background: true,
  size: "default"
});
const listQuery = reactive<any>({
  limit: 10,
  page: 1,
  dataSetName: ""
});
const tableListData = ref([
  {
    id: 1,
    code: "cccc",
    name: "xxxxxxxxx",
    info: "1",
    device: "xxxxxcdfdfs",
    lv: "1",
    type: "线下"
  }
]);
const { columns } = patrolPointLocationTable();
const resetSearch = () => {
  listQuery.dataSetName = "";
  init();
};
const handleSizeChange = (val: any) => {
  pagination.pageSize = val;
  listQuery.limit = val;
  init();
};
const handleCurrentChange = (val: any) => {
  pagination.currentPage = val;
  listQuery.page = val;
  init();
};

const init = () => {};
const handleUpdate = (row: object) => {};
const handleEditdate = (row: object) => {};
const handleDelete = (row: object) => {};
const addTbale = () => {};
</script>

<template>
  <div>
    <basic-layout>
      <!-- 如果自定义树内容 -->
      <!--    <template #treeButton></template>-->
      <!-- 树结构操作按钮 -->
      <template #search>
        <div class="search-left">
          <el-form :model="listQuery" inline>
            <el-form-item>
              <el-input v-model="listQuery.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-right">
          <el-button :icon="CirclePlus" type="primary" @click="addTbale">
            新增
          </el-button>
        </div>
      </template>
      <!-- 表格 -->
      <template #tableContent>
        <PureTableBar title="列表设置" :columns="columns" @refresh="init">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              ref="tableRef"
              row-key="id"
              adaptive
              table-layout="auto"
              :loading="listLoading"
              :size="size"
              :data="tableListData"
              :columns="dynamicColumns"
              :pagination="{ ...pagination, size }"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              @page-size-change="handleSizeChange"
              @page-current-change="handleCurrentChange"
            >
              <template #operation="{ row }">
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  @click="handleUpdate(row)"
                >
                  查看
                </el-button>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  @click="handleEditdate(row)"
                >
                  修改
                </el-button>
                <el-button
                  class="reset-margin"
                  link
                  type="danger"
                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </template>
    </basic-layout>
    <!--tree删除-->
  </div>
</template>

<style scoped lang="scss"></style>
